<!DOCTYPE html>
<html lang="en">
<head>
  <title>One Piece - Top war</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <style>
    body {
      color: #808080;
      font-family:Monospace;
      font-size:13px;
      text-align:center;
      
      background-color: #f0f0f0;
      margin: 0px;
      overflow: hidden;
    }
    
    a {
      color: #0080ff;
    }
    
    b { color: lightgreen }
    
    #container {
      white-space: nowrap;
    }
    #container_logzbuf {
      width: 50%;
      display: inline-block;
      position: relative;
      overflow: hidden;
    }
  </style>
</head>
<body>

<div id="container">
  <div id="container_logzbuf">
  </div>
</div>

<script src="../libs/three.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/controls/TrackballControls.js"></script>

<script>
  var view = {};
  var controls;
  var FOV = 50, NEAR = 0.1, FAR = 50000;
  var SCREEN_WIDTH = window.innerWidth;
  var SCREEN_HEIGHT = window.innerHeight;
  var labeldata = [{
    label: '艾斯',
    imgurl: './imgs/ace.jpg',
    position: [0, 40-FOV, 0],
    size: [50, 80, 10]
  }, {
    label: '马歇尔·D·蒂奇',
    imgurl: './imgs/teach.jpg',
    position: [-120, 75-FOV, 500],
    size: [90, 150, 10]
  }, {
    label: '唐吉诃德·多弗朗明哥',
    imgurl: './imgs/doflamingo.jpg',
    position: [120, 90-FOV, 500],
    size: [90, 160, 10]
  }, {
    label: '波雅·汉库克',
    imgurl: './imgs/hancock.jpg',
    position: [-120, 45-FOV, 1000],
    size: [50, 90, 10]
  }, {
    label: '月光·莫利亚',
    imgurl: './imgs/moria.jpg',
    position: [120, 90-FOV, 1000],
    size: [120, 180, 20]
  }, {
    label: '乔拉可尔·米霍克',
    imgurl: './imgs/mihawk.jpg',
    position: [-120, 50-FOV, 1500],
    size: [50, 100, 10]
  }, {
    label: '巴索罗米·熊',
    imgurl: './imgs/kuma.jpg',
    position: [120, 75-FOV, 1500],
    size: [140, 150, 10]
  }, {
    label: '沙·克洛克达尔',
    imgurl: './imgs/crocodile.jpg',
    position: [-120, 55-FOV, 2000],
    size: [60, 110, 10]
  }, {
    label: '甚平',
    imgurl: './imgs/jinbe.jpg',
    position: [120, 50-FOV, 2000],
    size: [70, 100, 10]
  }];
  var textureLoader = new THREE.TextureLoader();

  init();

  function init() {
    // 初始化场景，添加场景内物体
    var scene = initScene();
    // 初始化整个流程，创建相机、渲染器
    view = initView(scene);
    controls = new THREE.TrackballControls( view.camera );
    // 渲染
    animate();
  }

  function initScene() {
    // 创建场景Scene
    var scene = new THREE.Scene();
    // 添加环境光
    scene.add(new THREE.AmbientLight(0x3f2806));
    // 添加方向光
    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(0, 100, 100);
    scene.add(light);

    // 设置地面
    // 地面纹理
    var textureSquares = textureLoader.load( "./imgs/bright_squares256.png" );
    textureSquares.repeat.set( 10, 10 );
    textureSquares.wrapS = textureSquares.wrapT = THREE.RepeatWrapping;
    textureSquares.magFilter = THREE.NearestFilter;
    textureSquares.format = THREE.RGBFormat;
    // 地面材质
    var groundMaterial = new THREE.MeshPhongMaterial( {
      shininess: 80,
      color: 0xffffff,
      specular: 0xffffff,
      map: textureSquares
    } );
    // 地面形状
    var planeGeometry = new THREE.PlaneBufferGeometry( 100, 100 );
    // 生成地面
    var ground = new THREE.Mesh( planeGeometry, groundMaterial );
    ground.position.set( 0, -FOV, 0 );
    ground.rotation.x = - Math.PI / 2;
    ground.scale.set( 1000, 1000, 1000 );
    ground.receiveShadow = true;
    scene.add( ground );

    // 将人物放置在场景（Scene）里
    labeldata.forEach(function(item) {
      textureLoader.load(item.imgurl, function(texture) {
        var geometry = new THREE.BoxBufferGeometry(item.size[0], item.size[1], item.size[2]);
        var material = new THREE.MeshLambertMaterial({
          map: texture
        });
        var dotmesh = new THREE.Mesh(geometry, material);
        // 设置人物位置
        dotmesh.position.set(item.position[0], item.position[1], item.position[2]);
        scene.add(dotmesh);
      });
    });

    return scene;
  }

  function initView(scene) {
    var framecontainer = document.getElementById('container_logzbuf');
    // 创建相机
    var camera = new THREE.PerspectiveCamera(FOV, SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR);
    // 设置相机位置
    camera.position.set(0, 0, 300);
    // 将相机添加到场景
    scene.add(camera);

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer({antialias: true, logarithmicDepthBuffer: true});
    // 设置渲染器参数
    renderer.setClearColor(0xf0f0f0);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(SCREEN_WIDTH/2, SCREEN_HEIGHT);
    renderer.domElement.style.position = 'relative';
    renderer.domElement.id = 'renderer_logzbuf';
    // 将渲染器添加到html容器中
    framecontainer.appendChild(renderer.domElement);

    return {
      container: framecontainer,
      renderer: renderer,
      scene: scene,
      camera: camera
    };
  }

  function animate() {
    // 帧动画
    requestAnimationFrame(animate);
    // 更新控制器
    controls.update();

    // 更新屏幕画面
    render();
  }
  function render() {
    updateRendererSizes();
    view.renderer.render(view.scene, view.camera);
  }
  function updateRendererSizes() {

    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;

    view.renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
    view.camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    view.camera.updateProjectionMatrix();
    view.camera.setViewOffset( SCREEN_WIDTH, SCREEN_HEIGHT, 0, 0, SCREEN_WIDTH, SCREEN_HEIGHT );
    view.container.style.width = 100 + '%';
  }
</script>
</body>
</html>